<template>
  <div id="app">
<!--    <nav>-->
<!--      <router-link to="/">Home</router-link> |-->
<!--      <router-link to="/moudle">About</router-link>-->
<!--    </nav>-->
      <nav>
          <el-container>
              <el-aside width="200px">Aside</el-aside>
              <el-container>
                  <el-header>灰太狼餐厅</el-header>
                  <el-main><router-view/></el-main>
                  <el-footer>Footer</el-footer>
              </el-container>
          </el-container>
      </nav>
  </div>
</template>
<script>

</script>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .el-menu-item{
        padding-left: 20px;

    }
    .el-header, .el-footer {
        background-color: rgb(84,92,100);
        color: white;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: rgb(84,92,100);  /*#D3DCE6*/
        color: #333;
        text-align: center;
        /*line-height: 200px;*/
        height: 1600px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        /*line-height: 160px;*/
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>
